<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>供应商白名单</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            padding: 20px;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .header h1 {
            font-size: 24px;
            font-weight: normal;
            color: #333;
        }

        .user-info {
            font-size: 14px;
            color: #666;
        }

        .logout-link {
            color: #e74c3c;
            text-decoration: none;
            margin-left: 15px;
        }

        .logout-link:hover {
            text-decoration: underline;
        }

        .section {
            margin-bottom: 25px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        .section-title {
            font-size: 18px;
            margin-bottom: 15px;
            color: #2c3e50;
            font-weight: bold;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
        }

        .search-panel {
            background: white;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .search-row {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .search-item {
            display: flex;
            align-items: center;
            margin-right: 20px;
            margin-bottom: 10px;
        }

        .search-item label {
            margin-right: 8px;
            font-weight: bold;
            white-space: nowrap;
        }

        input[type="text"], select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 10px;
        }

        .btn-primary {
            background-color: #3498db;
            color: white;
        }

        .btn-primary:hover {
            background-color: #2980b9;
        }

        .btn-success {
            background-color: #2ecc71;
            color: white;
        }

        .btn-success:hover {
            background-color: #27ae60;
        }

        .btn-danger {
            background-color: #e74c3c;
            color: white;
        }

        .btn-danger:hover {
            background-color: #c0392b;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
            background: white;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        th {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #2c3e50;
        }

        tr:hover {
            background-color: #f5f7f9;
        }

        .pagination {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pagination input[type="button"] {
            margin: 0 5px;
            padding: 6px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: white;
            cursor: pointer;
        }

        .pagination input[type="button"]:hover {
            background: #f0f0f0;
        }

        .pagination b {
            margin: 0 15px;
        }

        /* 模态框样式 */
        #addModal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            width: 450px;
        }

        .modal-header {
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
            padding-bottom: 15px;
        }

        .modal-header h3 {
            margin: 0;
            color: #2c3e50;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }

        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .form-group .code-display {
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
            border: 1px solid #eee;
        }

        .modal-footer {
            text-align: right;
            margin-top: 20px;
        }

        .module {
            display: none;
            margin: 15px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: white;
        }

        .button-group {
            margin-top: 15px;
        }

        .no-data {
            text-align: center;
            padding: 30px;
            color: #7f8c8d;
            font-style: italic;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            /*控制点击事件出现按钮 跳转功能页面*/
            {
                $('[name="targetModule"]').click(function () {
                    window.location.href = "info.jsp?account=" + $('[name="loginaccount"]').text();
                })

                $('[name="whitebutton"]').click(function () {
                    window.location.href = "white.jsp?account=" + $('[name="loginaccount"]').text();
                })
                $('[name="blackbutton"]').click(function () {
                    window.location.href = "black.jsp?account=" + $('[name="loginaccount"]').text();
                })
                // 方法1: 使用toggle()方法
                $("#toggleBtn").click(function () {
                    $("#targetModule").toggle();
                });
                // 方法1: 使用toggle()方法
                $("#showModuleBtn").click(function () {
                    $("#targetModule1").toggle();
                });
            }
            checkenter(1);
            /*添加供应商到白名单*/
            {
                $('[name="addenter"]').on("click", function () {
                    $("#addModal").show(); // 显示模态框
                })
            }
            // ESC键关闭模态框
            $(document).keyup(function (e) {
                if (e.keyCode === 27) { // ESC键
                    $("#addModal").hide();
                }
            });
            $(document).on("click", "[name='addexit']", function (e) {
                e.preventDefault();
                var boo = window.confirm("确定要取消吗？")
                if (boo) {
                    $("#addModal").hide();
                }
            })
            /*动态添加企业名称*/
            /*根据当前页面的账号 我可以获得 这个管理人员所在的公司 因为我dao层返回的是对象
            * 这个人员所在的企业名称 就是当前企业名称*/
            var account = $('em[name="loginaccount"]').text();
            $.get("whiteenters/queryEnterName", {"account": account}, function (integerStringMap) {
                $.each(integerStringMap, function (key, value) {
                    $('[name="selectentername"]').append($("<option></option>").val(key).text(value));
                });
                $('select[name="selectentername"]').change(function () {
                    var selectedText = $(this).find('option:selected').text();
                    var selectedValue = $(this).val();
                    /*根据选择的企业名称 获得企业的统一社会代码*/
                    $.get("whiteenters/queryUnCode", {"selectedText": selectedText}, function (code) {
                        $("[name='code']").text(code);
                    })
                });
            })
            /*点击提交事件 提交添加白名单*/
            /*拿到当前对象所在企业名 和选择的企业名称 */
            $('[name="addsubmit"]').on("click", function () {
                var selectedText = $('select[name="selectentername"]').find('option:selected').text();
                var selectLevel = $('select[name="selectLevel"]').find('option:selected').text();
                $.get("whiteenters/addWhiteEnter",
                    {"account": account, "selectedText": selectedText, "selectLevel": selectLevel},
                    function (boo) {
                        if (boo) {
                            alert("添加成功！！")
                            $("#addModal").hide();
                            checkenter(1); // 刷新列表
                        } else {
                            alert("添加失败！！")
                        }
                    })
            })
            // 点击模态框外部关闭
            $(document).on('click', function (e) {
                if ($(e.target).closest('.modal-content').length === 0 &&
                    $(e.target).attr('name') !== 'addenter' &&
                    $("#addModal").is(":visible")) {
                    $("#addModal").hide();
                }
            });

        })
        /*点击查询按钮*/
        $(document).on("click", "[name='query']", function () {
            checkenter(1)
        })
        /*点击下一页 上一页*/
        $(document).on("click", "input[alt]", function () {
            checkenter($(this).attr("alt"))
        })
        /*退出当前账号*/
        $(document).on("click", "[name='exit']", function (e) {
            e.preventDefault();
            var boo = window.confirm("确定要退出吗？")
            if (boo) {
                window.location.href = "/provide/index.jsp"
            }
        })

        /*分页查询*/
        function checkenter(pageindex) {
            var whiteenter = $("[name='whiteenter']").val();
            var level = $("[name='level']").val()
            var account = $('em[name="loginaccount"]').text();

            $.get("whiteenters/showAll",
                {"pageindex": pageindex, "whiteenter": whiteenter, "level": level, "account": account},
                function (ph) {
                    var inputValue = $('[name="whiteenter"]').val();
                    JSON.stringify(ph)

                    if (ph.listIndex.length == 0) {
                        $("tbody").empty()
                        $("tfoot").empty()
                        $("<tr>" +
                            "<td colspan='8' class='no-data'><h5>对不起,没有符合查询数据</h5></td>" +
                            "</tr>").appendTo("tbody");
                    } else {
                        $("tbody").empty()
                        for (var i = 0; i < ph.listIndex.length; i++) {
                            var list = ph.listIndex[i];
                            $("<tr>\n" +
                                "            <td>" + list.id + "</td>\n" +
                                "            <td>" + list.entername + "</td>\n" +
                                "            <td>" + list.username + "</td>\n" +
                                "            <td>" + list.phone + "</td>\n" +
                                "            <td>" + list.email + "</td>\n" +
                                "            <td>" + list.supplierlevel + "</td>\n" +
                                "            <td>" + list.updatedate + "</td>\n" +
                                "            <td><button class='btn btn-danger' name='addblack' data-name='" + list.entername + "'>添加至黑名单</button></td>\n" +
                                "        </tr>").appendTo("tbody")
                        }

                        /*通过动态循环的时候 可以获得 指定的 添加黑名单 所在按钮 */
                        // 绑定添加至黑名单按钮事件
                        $('button[name="addblack"]').click(function () {
                            var enterName = $(this).data('name');
                            $.get("whiteenters/addBlackEnter", {
                                "whitename": enterName,
                                "account": account
                            }, function (add) {
                                if (add) {
                                    alert("添加进黑名单成功！！");
                                    checkenter(1); // 刷新列表
                                } else {
                                    alert("添加进黑名单失败,该数据在数据库中存在")
                                }
                            })
                        });

                        $("tfoot").empty();
                        var pagination = $("<div class='pagination'></div>").appendTo("tfoot");

                        if (ph.pageIndex != 1) {
                            $("<input type='button' alt='1' value='首页'>").appendTo(pagination)
                            $("<input type='button' alt='" + (ph.pageIndex - 1) + "' value='上一页'>").appendTo(pagination);
                        }
                        if (ph.pageIndex != ph.pageCount) {
                            $("<input type='button' alt='" + (ph.pageIndex + 1) + "' value='下一页'>").appendTo(pagination)
                            $("<input type='button' alt='" + ph.pageCount + "' value='尾页'>").appendTo(pagination)
                        }
                        $("<b>第" + ph.pageIndex + "页/共" + ph.pageCount + "页" + "</b>").appendTo(pagination)
                    }
                })
        }

        // 关闭模态框
        function closeModal() {
            $("#addModal").hide();
        }
    </script>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>供应商白名单</h1>
        <div class="user-info">
            当前用户：<em name="loginaccount"><%=request.getParameter("account")%></em>
            <a href="" name="exit" class="logout-link">退出</a>
        </div>
    </div>

    <div class="section">
        <div class="section-title">供应商管理</div>
        <button id="toggleBtn" class="btn btn-primary">企业管理</button>

        <div id="targetModule" class="module">
            <button name="targetModule" class="btn">企业信息认证</button>
        </div>
    </div>

    <div class="search-panel">
        <div class="search-row">
            <div class="search-item">
                <label>企业名称：</label>
                <input type="text" name="whiteenter" placeholder="请输入企业名称">
            </div>
            <div class="search-item">
                <label>企业评级：</label>
                <select name="level">
                    <option value="">请选择</option>
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                    <option value="D">D</option>
                    <option value="E">E</option>
                </select>
            </div>
            <div class="search-item">
                <input type="button" name="query" value="查询" class="btn btn-primary">
                <input type="button" name="addenter" value="添加供应商" class="btn btn-success">
            </div>
        </div>
    </div>

    <table>
        <thead>
        <tr>
            <th>序号</th>
            <th>企业名称</th>
            <th>企业联系人</th>
            <th>联系方式</th>
            <th>联系邮箱</th>
            <th>企业评级</th>
            <th>更新日期</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
        <tfoot></tfoot>
    </table>

    <div class="section">
        <div class="section-title">供应商管理</div>
        <button id="showModuleBtn" class="btn btn-primary">供应商管理</button>

        <div id="targetModule1" class="module">
            <button name="whitebutton" class="btn">供应商白名单</button>
            <button name="blackbutton" class="btn">供应商黑名单</button>
        </div>
    </div>
</div>

<!-- 模态框 -->
<div id="addModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>添加供应商</h3>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label>企业名称</label>
                <select name="selectentername">
                    <option value="" selected>请选择企业</option>
                </select>
            </div>
            <div class="form-group">
                <label>统一社会信用代码</label>
                <div class="code-display"><i name="code"></i></div>
            </div>
            <div class="form-group">
                <label>企业评级</label>
                <select name="selectLevel">
                    <option value="" selected>请选择企业评级</option>
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                </select>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" onclick="closeModal()" name="addexit">取消</button>
            <button class="btn btn-primary" name="addsubmit">提交</button>
        </div>
    </div>
</div>
</body>
</html>